<script setup lang="ts">
import { reactive } from 'vue';

interface Params {
  name: string;
  desc: string;
}

interface ListItem extends Params {
  id: number;
}

const params = reactive<Params>({
  name: '',
  desc: '',
});

const list = reactive<ListItem[]>([]);

let currentId = 1;

function onAdd(e: MouseEvent) {
  console.log(e);

  list.push({
    id: currentId++,
    ...params,
  });
}

function onDelete(id: number) {
  const index = list.findIndex((item) => item.id === id);
  list.splice(index, 1);
}

function onChange(e: Event) {
  console.log((e.target as HTMLInputElement).value);
}

const arr: (string | number)[] = [1, 2, 3, 4, 5];
arr.push('1');

</script>

<template>
  名字：<input type="text" v-model="params.name" @change="onChange">
  描述：<input type="text" v-model="params.desc">
  <button @click="onAdd">提交</button>

  <ol>
    <li
      v-for="item in list"
      :key="item.id"
    >
      {{ item.name }} - {{ item.desc }}
      <button @click="onDelete(item.id)">删除</button>
    </li>
  </ol>
</template>
